<template>
  <div>
    <nav-bar title="进度管理">
      <template v-slot:right>
        <span class="fontSize14" style="color: #999;" @click="$router.push({name: 'ScheduleReport'})">进度报表</span>
      </template>
    </nav-bar>
    <div class="maxinBox">
      <van-row class="realTimeTask backgroundfff">
        <van-col :span="18">
          <div style="padding: 0.3125rem 0;">
            <span class="fontSize16">{{scheduleList.projectName || '--'}}</span>
            <span>
              <van-button v-if="scheduleList.scheduleStatus === '正常'" plain type="info" size="mini">{{scheduleList.scheduleStatus}}</van-button>
              <van-button v-else plain type="danger" size="mini">{{scheduleList.scheduleStatus}}</van-button>
            </span>
          </div>
          <div style="color: #666;" class="fontSize14">负责人：{{scheduleList.projectLeader || '--'}}</div>
          <div style="color: #666;" class="fontSize14">电话：{{scheduleList.phone || '--'}}</div>
          <div style="color: #666;" class="fontSize14">项目地址：{{scheduleList.address || '--'}}</div>
        </van-col>
        <van-col :span="6">
          <img :src="scheduleList.projectQrUrl" alt="" style="width: 100%;margin-top: 0.4375rem;">
        </van-col>
      </van-row>
      <div class="marginTop5">
        <van-tabs type="card" v-model="active" @click="getScheduleManage">
          <van-tab title="进度管理" class="marginTop5">
            <van-collapse v-model="activeName" accordion>
              <van-collapse-item :title="item.scheduleName" :name="item.scheduleName" v-for="(item, index) in scheduleList.schedules" :key="index">
                <van-row v-for="(itemData, indexData) in item.scheduleList" :key="indexData" style="margin: 0.3125rem 0.625rem;font-size: 0.75rem;border: 0.0625rem solid #F5F5F4;padding: 0.625rem;">
                  <van-col :span="12" style="color: #333;">{{itemData || '--'}}</van-col>
                </van-row>
              </van-collapse-item>
            </van-collapse>
          </van-tab>
          <van-tab title="进度报表" class="marginTop5">
            <van-collapse v-model="activeName" accordion>
              <van-collapse-item :title="item.projectSchedule" :name="item.projectSchedule" v-for="(item, index) in scheduleList.scheduleReports" :key="index">
                <van-row v-for="(itemData, indexData) in item.detailList" :key="indexData" style="margin: 0.3125rem 0.625rem;font-size: 0.75rem;border: 0.0625rem solid #F5F5F4;padding: 0.625rem;">
                  <van-col :span="4" style="color: #333;">{{itemData.staskName || '--'}}</van-col>
                  <van-col :span="8" style="color: #333;">{{itemData.procent || '--'}}</van-col>
                  <van-col :span="12" style="color: #333;">{{itemData.time || '--'}}</van-col>
                </van-row>
              </van-collapse-item>
            </van-collapse>
          </van-tab>
        </van-tabs>
      </div>
    </div>
  </div>
</template>

<script>
  import scheduleManage from '../../../api/workAPI/scheduleManage.js'
  export default {
    data() {
      return {
        active: 0,
        activeName: '开工资料',
        milestoneList: [],
        scheduleList: []
      }
    },
    methods: {
      getScheduleManage() {
        let sheet = this.active + 1
        let projectId = localStorage.getItem('projectId')
        scheduleManage.getScheduleManage(projectId, sheet).then(res => {
          this.scheduleList = res
        })
      }
    },
    mounted() {
      this.getScheduleManage()
    }
  }
</script>

<style scoped lang="scss">
  .realTimeTask{
    padding: 0.9375rem;
    font-size: 0.875rem;
    border-bottom: 0.0625rem solid #E5E5E5;
    .van-col--13 div{
      padding-bottom: 0.3125rem;
    }
    .van-col--7{
      height: 6.875rem;
      line-height: 6.875rem;
      img{
        width: 100%;
        display: inline-block;
        vertical-align: middle;
      }
    }
  }
  /deep/ .van-tabs{
    margin-bottom: 1.25rem;
  }
  /deep/ .van-tabs__wrap{
    // height: 2.75rem;
    .van-tabs__nav--card{
      border: inherit;
      margin: inherit;
      // height: 2.75rem;
      .van-tab.van-tab--active{
        background-color: #fff;
        color: #1577FF;
      }
      .van-tab{
        border: inherit;
        // height: 2.75rem;
        color: #999;
        background-color: #EBEBEB;;
      }
    }
  }
</style>
